<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        /* 头部搜索框 */
        .header {
            width: 100%;
            height: 50px;
            background: rgb(95, 185, 245);
            text-align: center;
        }

        .header .ipu {
            width: 90%;
            height: 30px;
            margin-top: 10px;
            border-radius: 50px;
            background: #f5f5f5;
            text-align: center;
        }

        /* 轮播图 */
        .bander {
            width: 95%;
            height: 80px;
            background: rgb(95, 185, 245);
            margin: 15px auto;
            border-radius: 10px;
        }

        /* 猜你喜欢 */
        .like {
            margin-left: 10px;
            font-weight: bold;
            font-size: 20px;
        }

        /* 排序 */
        .sort {
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .sort div {
            width: 20%;
            text-align: center;
        }

        .sort div.active {
            color: black;
            font-weight: bold;
        }

        /* 年度热卖 */
        .bestSeller {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-around;
            font-size: 14px;
        }

        .bestSeller div {
            width: 22%;
            height: 30px;
            text-align: center;
            background: #f5f5f5;
            line-height: 30px;
            border-radius: 5px;
        }

        /* 商家列表 */
        #app .list {
            width: 100%;
            display: flex;
            margin-bottom: 15px;
        }

        #app .list .message {
            margin-left: 20px;
            line-height: 25px;
        }

        #app .list .message span {
            font-size: 12px;
            color: #666;
        }

        #app .list .message .manjian span {
            font-size: 12px;
            border: 1px solid red;
            color: red;
            margin-left: 5px;
        }

        #app .list .message h2 {
            font-size: 15px;

        }

        #app .list .icon {
            margin-left: 10px;
        }

        #app .list .icon img {
            width: 80px;
            height: 80px;

        }

        /* 底部按钮 */
        #app .footer {
            width: 100%;
            height: 40px;
            position: fixed;
            bottom: 20px;
            display: flex;
            justify-content: space-around;
        }

        #app .footer button {
            width: 30%;
            background: white;
        }

        #app .footer .activeone {
            color: rgb(95, 185, 245);
        }
    </style>
</head>

<body>
    <!-- 头部搜索框 -->
    <div class="header">
        <input type="text" placeholder="输入商家商品名称" class="ipu">
    </div>

    <!-- 背景图 -->
    <div class="bander">

    </div>

    <div class="like">猜你喜欢</div>
    <div id="app">
        <!-- 综合排序，点击高亮 -->
        <div class="sort">
            <div :class="{active: currentIndexOne == index}" @click="handleClickOne(index)" v-for="(item,index) in arr">
                {{item}}</div>
        </div>

        <!-- 年度热卖 -->
        <div class="bestSeller">
            <div v-for="(item,index) in arr1">{{item}}</div>
        </div>


        <!-- 商家列表 -->
        <div class="list" v-for="(item,index) in list">
            <!-- 商家图标 -->
            <div class="icon">
                <img :src="item.pic" alt="">
            </div>
            <!-- 商家信息 -->
            <div class="message">
                <h2>{{item.name}}</h2>
                <span>★{{item.score}}</span>
                <span>月销售{{item.xl}}</span><br>
                <span>起送￥{{item.qs}}</span>
                <span>远距离配送￥{{item.ps}}</span>
                <span style="text-decoration: line-through;">￥{{item.yj}}</span>&nbsp;&nbsp;
                <span>{{item.minutes}}分钟{{item.km}}km</span><br>
                <p class="manjian"><span v-for="(item,index) in item.manjian">
                        {{item}}
                    </span>
                </p>
            </div>
        </div>

        <!-- 底部按钮 -->
        <div class="footer">
            <button :class="{activeone: currentIndexTwo == index}" @click="handleClickTwo(index)"
                v-for="(item,index) in arr2">{{item}}</button>
        </div>
    </div>








    <script src="vue-2.5.21.js"></script>
    <script src="index.js"></script>
</body>

</html>